<template>
  <div class="details">知识掌握情况一览表</div>
  <div class="tablelist">
    <table class="custom-table" :style="{ 'border-collapse': 'collapse', width: '100%' }">
      <thead>
        <tr class="header-row">
          <th class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">测评知识点</th>
          <th class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">知识难度</th>
          <th class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">掌握程度</th>
          <th class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">建议学习时长</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in tableData" :key="record.KlName">
          <td class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">{{ record.KlName }}</td>
          <td class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">{{ calculateDifficulty(record) }}</td>
          <td class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">{{ calculateMastery(record) }}</td>
          <td class="text-center" style="border-bottom: 1px solid #e8e8e8; padding: 8px;">{{ calculateStudyTime(record) }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
const props = defineProps<{
  klScoreLevdata: [];
}>();
// 计算属性：处理后的表格数据
const tableData = computed(() => props.klScoreLevdata || [])

// 计算知识难度
const calculateDifficulty = (record) => {
  const ratio = (record.Avg / record.TotalScore) * 100
  if (ratio >= 75) return '容易'
  if (ratio >= 70) return '较易'
  if (ratio >= 65) return '适中'
  if (ratio >= 55) return '较难'
  return '困难'
}

// 计算掌握程度
const calculateMastery = (record) => {
  const ratio = (record.Score / record.TotalScore) * 100
  if (ratio === 100) return '100%掌握'
  if (ratio >= 85) return '熟练掌握'
  if (ratio >= 65) return '部分掌握'
  return '未掌握'
}

// 计算建议学习时长
const calculateStudyTime = (record) => {
  const scoreRatio = (record.Score / record.TotalScore) * 100
  const avgRatio = (record.Avg / record.TotalScore) * 100
  
  if (scoreRatio === 100) return '巩固'
  if (scoreRatio >= 85) return '0.5h'
  if (scoreRatio >= 65) return '1h'
  if (avgRatio >= 75) return '1h'
  if (avgRatio >= 70) return '1.5h'
  if (avgRatio >= 65) return '2h'
  if (avgRatio >= 55) return '2h'
  return '2.5h'
}

</script>
<style lang="less" scoped>
.details {
  //   width: 15vw;
  font-weight: 500;
  font-size: 17px;
  color: #03305c;
  text-decoration: underline;
  text-decoration-color: #0075ff;
}
.tablelist {
  margin-top: 1vw;
}
/* 表头灰色背景 */
.header-row {
  background-color: #f0f0f0; /* 浅灰色背景 */
}
</style>
